<template>
  <view>
    <my-message-top :text="'收藏夹'" :pic="'../../static/more.png'" @open="deleteCollect()"></my-message-top>
    <view class="my-collect">
      <view class="my-collect-box" v-for="(item,i) in collectList" :key="i">
        <radio-group @click="checkPic(item,i)">
         
        <radio :value="i" v-show="ishow" :checked="i === current"/>
        </radio-group>
        <image :src="item" mode=""></image>
      </view>
    </view>
    
    <view class="btn" v-show="ishow" @click="dPic()">
      <text>取消收藏</text>
    </view>
  </view>
</template>

<script>
  import {getCollect,collectPic} from '../../api/collect.js'
  export default {
    data() {
      return {
        queryObj:{
          pageNum: 1,
          pageSize: 6
        },
        collectList: [],
        ishow: false,
        ischeck: false,
        checkList: [],
        current: -1
      };
    },
    onLoad(){
      this.getCollect()
    },
    methods:{
      async getCollect(){
        const {data:data} = await getCollect(this.queryObj)
        console.log(data);
        this.collectList = data.data.imgs
        console.log(this.collectList);
      },
      deleteCollect(){
        this.ishow = !this.ishow
      },
      checkPic(item,i){
        this.current = i
        console.log(this.current);
        this.checkList.push(item)
      },
     
      async dPic(){
        console.log(999);
        console.log(this.checkList);
        const {data:data} = await collectPic(this.checkList)
        this.getCollect()
        this.current = -1
        console.log(data);
        this.ishow = !this.ishow
        if(data.code === 200) return uni.$showMsg('取消收藏成功')
        
      }
    }
  }
</script>

<style lang="scss">
.my-collect{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin: 25rpx 25rpx;
  .my-collect-box{
    position: relative;
    radio{
      position: absolute;
      top: 0rpx;
      left: 0rpx;
    }
    image{
      
      width: 337rpx;
      height: 236rpx;
      z-index: -1
    }
    margin-bottom: 20rpx;
  }
}

.btn{
  width: 318rpx;
  height: 100rpx;
  border-radius: 25rpx;
  background-color: #FFDC91;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 885rpx;
  margin-left: 200rpx;
  z-index: 999;
  text{
    font-size: 22px;
    font-weight: bold;
    color: #666666;
  }
}
</style>
